let string = `
<style>
body {
  background: #ffe600;
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

*::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
#styleText{
  position: fixed;
  left:0;
  top: 0;
  height:50vh;
  width:100%;
  overflow:hidden;
}
.pika {
  position: fixed;
  left:0;
  bottom: 0;
  height:50vh;
  width:100%;
}

.nose {
  width: 30px;
  height: 30px;
  position: absolute;
  left: 50%;
  margin-left: -15px;
  top: 49px;
}

.nose .triangle {
  border: 8px solid;
  border-color: black transparent transparent transparent;
  width: 16px;
  height: 16px;
  position: absolute;
  left: 50%;
  margin-left: -8px;
  bottom: -8px;
}

.nose .circle {
  width: 14px;
  height: 6px;
  position: absolute;
  left: 50%;
  margin-left: -7px;
  bottom: 8px;
  border-radius: 8px 8px 0 0;
  background: black;
}

.nose:hover {
  transform-origin: center bottom;
  animation: wave 300ms infinite linear;
}

.eye {
  width: 50px;
  height: 50px;
  position: absolute;
  left: 50%;
  margin-left: -25px;
  top: 32px;
  border-radius: 50%;
  background: black;
}

.eye.left {
  transform: translateX(-100px);
}

.eye.right {
  transform: translateX(100px);
}

.eye::before {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  transform: translate(8px, 5px);
  background: white;
}

.beard {
  /*border:1px solid red;*/
  width: 140px;
  height: 5px;
  position: relative;
  left: 50%;
  margin-left: -70px;
  top: 100px;
}

.beard::before {
  content: '';
  display: block;
  position: absolute;
  border: 3px solid black;
  bottom: 0;
  width: 70px;
  height: 20px;
  border-top: none;
  border-right: none;
  transform: rotate(-25deg);
  border-bottom-left-radius: 59px 27px;
  background: #ffe600;
  z-index: 1;
}

.beard::after {
  content: '';
  display: block;
  position: absolute;
  border: 3px solid black;
  bottom: 0;
  width: 70px;
  height: 20px;
  transform: translateX(70px) rotate(25deg);
  border-top: none;
  border-left: none;
  border-bottom-right-radius: 59px 27px;
  background: #ffe600;
}

.beard .mouth {
  border: 3px solid black;
  height: 140px;
  width: 100px;
  position: absolute;
  left: 50%;
  margin-left: -50px;
  transform: translateY(-12px);
  border-top-left-radius: 1em 2em;
  border-top-right-radius: 1em 2em;
  border-bottom-left-radius: 6.18em 15em;
  border-bottom-right-radius: 6.18em 15em;
  background: #9b000a;
  overflow: hidden;
}

.beard .mouth::after {
  content: '';
  position: absolute;
  height: 110px;
  width: 100px;
  bottom: 0;
  left: 50%;
  margin-left: -50px;
  border-top-left-radius: 5em 3em;
  border-top-right-radius: 5em 3em;
  background: #ff485f;
}

.face {
  border: 3px solid black;
  position: absolute;
  height: 60px;
  width: 60px;
  left: 50%;
  margin-left: -30px;
  top: 122px;
  border-radius: 50%;
  background: #ff0000;
}

.face.left {
  transform: translateX(-140px);
}

.face.right {
  transform: translateX(140px)
}

@keyframes wave {
  0% {
    transform: rotate(0deg)
  }
  33% {
    transform: rotate(-5deg)
  }
  67% {
    transform: rotate(5deg)
  }
  100% {
    transform: rotate(0deg)
  }
}
</style>
`
let n = 1
let id1


let button = {
  logString: () => {
    if (n < string.length) {
      n += 1
      style.innerHTML = string.substring(0, n)
      styleText.innerText = string.substring(0, n)
      styleText.scrollTop = styleText.scrollHeight
    } else {
      window.clearInterval(id1)
    }
  },
  clearAndSetInterval: (time, id) => {
    if (!id) {
      window.clearInterval(id1)
      id1 = setInterval(button.logString, time)
    } else {
      document.getElementById(id).onclick = () => {
        window.clearInterval(id1)
        id1 = setInterval(button.logString, time)
      }
    }
  },
  buttons: {
    slow: 500,
    normal: 80,
    fast: 0
  },
  bindEvents: () => {
    play.onclick = () => {
      if (n >= string.length) {n = 1}
      button.clearAndSetInterval(0)
    }
    stopPlay.onclick = () => {
      window.clearInterval(id1)
    }
    for (let key in button.buttons) {
      if(button.buttons.hasOwnProperty(key)){
        button.clearAndSetInterval(button.buttons[key], key)
      }
    }
  },
}
button.bindEvents()